<template>
  <el-upload
    :limit="1"
    :action="url"
    :headers=getAuthorization()
    :accept="accept"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUploadFile"
    :on-remove="handleRemove"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <!-- @slot 自定义上传文件样式，默认是个按钮 -->
    <slot>
      <el-button size="small" plain>选择文件</el-button>
    </slot>
    <div slot="tip" class="el-upload__tip">只能上传1个模板文件(excel)，且不超过10M</div>
  </el-upload>
</template>
<script>
/**
 * 单文件上传组件，继承了 element 的 el-upload 的所有绑定属性和事件
 * @displayName 文件上传 / fileUpload
 * */
export default {
  name: 'FileUpload',
  props: {
    /**
     * @model
     * url：上传的地址； headers：上传的请求头部； accept：接受上传的文件类型
     * 注：文件上传成功后返回文件地址
     */
    url: {
      type: String,
      default: function () {
        return `${this.BASE_API_URL}arpa-basic-api/fileUpload`
      }
    },
    accept: {
      type: String,
      default: '.xls,.xlsx'
    }
  },
  data() {
    return {}
  },
  methods: {
    //上传前校验
    beforeUploadFile(file) {
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      let size = file.size / 1024 / 1024
      const accept = this.accept.split(',')
      if (!accept.includes(`.${extension}`)) {
        this.$message.error(`只能上传${accept}格式的文件`)
        return false
      }
      if (size > 10) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
      this.rLoading = this.openLoading({
        text: '上传中...',
        duration: 'n'
      })
    },
    // 文件列表移除文件
    handleRemove(file, fileList) {
      this.$emit('input', '')
    },
    // 上传失败
    handleError(res, file) {
      console.log(res, file)
      this.rLoading.close() // 关闭遮罩层
      this.$message.error({ message: '上传失败' })
    },
    // 上传成功
    handleSuccess(res, file) {
      if (res.status === 0) {
        /**
         * 直接使用v-model语法糖即可.
         * @event input
         * */
        this.$emit('input', res.data)
        this.$emit('uploadedSuccess', res.data)
        this.$message.success({ message: res.msg })
      } else {
        this.$message.error({ message: res.msg })
      }
      this.rLoading.close() // 关闭遮罩层
    }
  }
}
</script>

<docs>
	```vue
	<fileUpload v-model="fileInfo"></fileUpload>
	// 或
	<fileUpload v-model="fileInfo2" class="fr mr10">
		<a-button type="primary">
			<a-icon type="upload"/>
			文件导入
		</a-button>
	</fileUpload>
	```
</docs>
